<template>
    <div>
        <h2>姓名：{{name}}</h2>
        <h2>性别：{{sex}}</h2>
        <h2>年龄：{{myAge}}</h2>
        <button @click="updateAge">点击修改年龄</button>
	</div>
</template>

<!-- 
    props属性：
        功能：让组件接受外部传递过来的数据
        1.传递数据：<Student name="张三" :age="22"/>
        2.接受数据
            (1)第一种简单接收
                props:['name','age']
            (2)第二种限制类型：
                props:{
                    name:String,
                    age:Number
                }
            (3)第三种：限制类型、限制必要性、指定默认值
                props:{
                    name:{
                        type:String,
                        required:true, // 必传
                    },
                    age:{
                        type:Number,
                        default:99
                    }
                }
-->
<script>
    export default {
        name:'Student',
        data(){
           return {
                myAge: this.age // this.age是从props中传递过来的
           }
        },
        methods:{
            updateAge(){
                // 不推荐直接修改this.age的内容，否则会报错。若要修改，复制一份即可
                this.myAge++ // 修改复制后的this.age的内容
            }
        },
        // 简单的声明接受数据
        // props:['name','sex','age']
        // 接受数据的同时对类型进行限制
        /*
        props:{
            name:String,
            age:Number,
            sex:String
        }
        */
        // 接受数据的同时指定类型、默认值、必传项
        props:{
            name:{
                type:String,
                required:true, // 必传
            },
            age:{
                type:Number,
                default:99
            },
            sex:{
                type:String
            }
        }
    }
</script>